import React, { Component} from 'react'
import PropTypes from 'prop-types'
import { Redirect} from 'react-router-dom'

import Logo from '../../components/logo/logo'
import {

    WhiteSpace, WingBlank,
    Button, InputItem, Radio, TextareaItem,
    List, Badge, Icon, Grid, Modal,
    Toast, Result, NavBar, TabBar
} from 'antd-mobile'
import { connect} from 'react-redux'
import { register, actionSuccess} from '../../redux/actions'

const ListItem = List.Item

class Register extends Component{

    static propTypes = {
        register: PropTypes.func.isRequired
    }

    //定义状态  获取数据 每个 输入框 的 信息
    state = {
        username: '',
        paw: '',
        pawo: '',
        type: 'boxx'
    }


    registerSuccess = () => {
        // 此时在这里发送ajax请求拿到数据  数据即为state
        //调用的时候注意  是使用  this.props.xxx调用
        this.props.register(this.state, this.remin)
    }

    //在这里定义一个 提示的 函数
    remin = (msg) => {
        Toast.fail(msg, 1)
    }
    //前往 登陆页面
    toLogin = () => {
        this.props.history.replace('/login')
    }
    
    registerClick = (key, val) => {
        this.setState({
            [key]: val
        })
    }
    
    render(){
        const { type} = this.state
        const { redirectTo} = this.props.user
        if (redirectTo === '/boxx' || redirectTo === '/manito'){
            return <Redirect to={redirectTo}/>
        }
        return(
          <div>
                 <NavBar className='NavTop'>Jie&nbsp;&nbsp;招聘</NavBar>
                 <Logo />
                 <WingBlank>
                    <List>
                         <WhiteSpace size='md'/>
                         <InputItem placeholder='请输入用户名' onChange={val => {this.registerClick('username', val)}}>用&nbsp;户&nbsp;名&nbsp;:</InputItem>
                         <WhiteSpace size='md'/>
                         <InputItem type='password' placeholder='请输入密码' onChange={val => {this.registerClick('paw', val)}}>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;:</InputItem>
                         <WhiteSpace size='md'/>
                         <InputItem type='password' placeholder='请确认密码' onChange={val => {this.registerClick('pawo', val)}}>确认密码&nbsp;:</InputItem>
                         <WhiteSpace size='md'/>
                         <ListItem>
                             <span>用户类型&nbsp;：</span>
                             &nbsp;&nbsp;&nbsp;&nbsp;
                             <Radio checked={ type === 'manito'} onChange={() => {this.registerClick('type', 'manito')}}>大神</Radio>
                             &nbsp;&nbsp;&nbsp;&nbsp;
                             <Radio checked={ type === 'boxx'} onChange={() => {this.registerClick('type', 'boxx')}}>老板</Radio>
                         </ListItem>
                         <WhiteSpace size='lg'/>
                         <Button type='primary' onClick={this.registerSuccess}>注册</Button>
                         <WhiteSpace size='lg'/>
                         <Button onClick={this.toLogin}>已有账户？登陆</Button>
                    </List>
                 </WingBlank>

          </div>
        )
    }
}

export default connect(
    state => ({ user: state.user}),
    { register, actionSuccess}
)(Register)
